
<nz-layout style="height: 100%;">
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
    <div class="logo"></div>
    <ul nz-menu nzTheme="dark" nzMode="inline">
      <li nz-submenu nzTitle="User" nzIcon="user">
        <ul>
          <li nz-menu-item>Tom</li>
          <li nz-menu-item>Bill</li>
          <li nz-menu-item>Alex</li>
        </ul>
      </li>
      <li nz-submenu nzTitle="Team" nzIcon="team">
        <ul>
          <li nz-menu-item>Team 1</li>
          <li nz-menu-item>Team 2</li>
        </ul>
      </li>
      <li nz-menu-item>
        <i nz-icon nzType="file"></i>
        <span>File</span>
      </li>
    </ul>
  </nz-sider>
  <nz-layout>
    <nz-header>
      <i class="trigger" nz-icon [nzType]="isCollapsed ? 'menu-unfold' : 'menu-fold'" (click)="isCollapsed = !isCollapsed"></i>
      <div class="top-header-box">
        <div class="top-header-item">
          <nz-badge [nzCount]="5" [nzOffset]="[0,-2]">
            <i nz-icon nzType="bell" nzTheme="outline" style="font-size: 16px;"></i>
          </nz-badge>
        </div>
        <div class="top-header-item" nz-dropdown [nzDropdownMenu]="userInfoMenu">
          <nz-avatar nzIcon="user" [nzShape]="'square'" nzSrc="//zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" class="m-headImg"></nz-avatar>
          <span>Hi,{{userInfo.userName}}</span>

          <nz-dropdown-menu #userInfoMenu="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li nz-menu-item><i nz-icon nzType="user" nzTheme="outline"></i> <span class="font-size-small">个人中心</span></li>
              <li nz-menu-item>2nd menu item</li>
              <li nz-menu-item>3rd menu item</li>
            </ul>
          </nz-dropdown-menu>
        </div>
      
      </div>
    </nz-header>
    <nz-content>
      <nz-breadcrumb>
        <nz-breadcrumb-item>User</nz-breadcrumb-item>
        <nz-breadcrumb-item>Bill</nz-breadcrumb-item>
      </nz-breadcrumb>
      <div class="inner-content">
        <div [innerHTML]="code | language : 'javascript' | markdown"></div>
      </div>
    </nz-content>
    <nz-footer> ©2020 ng-seed by HeFei Wei</nz-footer>
  </nz-layout>
</nz-layout>